<template>
  <div class="app-container-item">
    <div class="form-main">
      <el-form ref="form" :model="form" label-width="90px" class="form-flex">
        <el-row :gutter="20">
          <el-col :span="8" :xs="24">
            <el-form-item label="小区名称" prop="communityName">
              <el-input v-model="form.communityName" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="车场总数" prop="parkingNum">
              <el-input v-model="form.parkingNum" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="车位总数" prop="carportNum">
              <el-input v-model="form.carportNum" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="未用总数" prop="unusedNum">
              <el-input v-model="form.unusedNum" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="已用总数" prop="usedNum">
              <el-input v-model="form.usedNum" disabled/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { getCommunityParking } from "@/api/property/community"

  export default {
    name:'parkingCommunityForm',
    data() {
      return {
        // 表单参数
        form: {},
      };
    },
    watch: {
      currentNode(v) {
        this.initForm()
      }
    },
    created() {
      this.initForm()
    },
    methods: {
      initForm() {
        this.reset();
        if (this.currentNode.modelType == 'community') {
          getCommunityParking(this.currentNode.id).then(response => {
            this.form = response.data;
            this.form.communityName = this.currentNode.label
          });
        }
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          communityName: null,
          parkingNum:null,
          carportNum:null,
          usedNum:null, //已用
          unusedNum:null, //未用
        };
        this.resetForm("form");
      },
    },
    props: {
      currentNode: {
        type: Object,
        default: () => {
        }
      },
    }
  };
</script>
